<template>
  <div class="amap-page-container">
    <div class="toolbar">当前坐标: {{ lng }}, {{ lat }}</div>
    <el-amap
      vid="amapDemo"
      :center="center"
      :zoom="zoom"
      class="amap-demo"
      :events="events"
      pitch-enable="false"
    >
      <el-amap-marker
        v-for="(marker,index) in markers"
        :key="index"
        :events="marker.events"
        :position="marker.position"
      />
      <el-amap-info-window
        v-if="window"
        :position="window.position"
        :visible="window.visible"
        :content="window.content"
        :offset="window.offset"
        :close-when-click-map="true"
        :is-custom="true"
      ></el-amap-info-window>
    </el-amap>
  </div>
</template>

<script>
export default {
  name: "pumpmessagemap",
  props: {
    lnglat: Object,
  },
  data: function () {
    const self = this;
    return {
      data: [
        {
          position: "109.404169,24.32712",
          address: "另一个地址",
        },
        {
          position: "121.564254, 31.21135",
          address: "一个地址",
        },
      ],
      zoom: 13,
      center: [109.411703, 24.314617],
      icon: "../assets/ditu-dibiao.png",
      expandZoomRange: true,

      markers: [],
      windows: [],
      window: "",
      events: {
        click(e) {
          const { lng, lat } = e.lnglat;
          self.lng = lng;
          self.lat = lat;
          self.$emit("getLnglat", { lng: lng, lat: lat });
          self.point();
        },
      },
      lng: 109.411703,
      lat: 24.314617,
    };
  },
  watch: {
    lnglat: {
      handler: function () {
        this.lng = this.lnglat.lng;
        this.lat = this.lnglat.lat;
        console.log(this.lat + this.lat);
        if (this.lng !== "" && this.lat !== "") this.point();
      },
      deep: true,
    },
  },
  mounted() {
    this.point();
  },
  methods: {
    point() {
      const markers = [];
      const windows = [];
      markers.push({
        position: [this.lng, this.lat],
        // icon:item.url, //不设置默认蓝色水
      });
      windows.push({
        position: [this.lng, this.lat],
        isCustom: true,
        offset: [115, 55], // 窗体偏移
        showShadow: false,
        visible: false, // 初始是否显示
        //address: item.address,
      });
      //  加点
      this.markers = markers;
      // 加弹窗
      this.windows = windows;
    },
    checkDetail() {
      alert("点击了查看详情");
    },
  },
};
</script>

<style lang="scss" scoped>
.amap-demo {
  height: 150px;
}
.amap-page-container {
  position: relative;
}
#info-window {
  width: 211px;
  height: 146px;
  margin-left: 30px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  .detail {
    width: 100%;
    height: 24px;
    color: #fff;
    background-color: #1a73e8;
    position: absolute;
    bottom: 0;
    font-size: 12px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
  }
}
</style>
